<template>
  <div class="app-container">
    <div class="content">
      <template
        v-if="
          salaryCalculationForm.calculationStatus == 3 ||
          salaryCalculationForm.calculationStatus == 4
        "
      >
        <div class="title">{{ $t("saved_payroll_calculation") }}</div>
        <div class="desc">
          {{ $t("the_payroll_calculation")
          }}<span class="desc-color" @click="backList">{{
            $t("return_payroll_calculation")
          }}</span>
        </div>
        <div class="button-line">
          <el-button type="success" plain @click="changeStatus(2)">{{
            $t("edit_payroll_calculation")
          }}</el-button>
          <el-button type="primary" @click="changeStatus(5)">{{
            $t("lock_payroll_calculation")
          }}</el-button>
        </div>
      </template>

      <template v-if="salaryCalculationForm.calculationStatus == 5">
        <div class="title">{{ $t("locked_payroll_calculation") }}</div>
        <div class="desc">
          {{ $t("unlock_salary_calculation")
          }}<span class="desc-color" @click="backList">{{
            $t("return_payroll_calculation")
          }}</span>
        </div>
        <div class="button-line">
          <el-button type="success" plain @click="changeStatus(4)">{{
            $t("unlock")
          }}</el-button>
          <el-button type="primary" @click="changeStatus(6)">{{
            $t("approve_payroll_calculation")
          }}</el-button>
          <el-button type="warning" plain @click="createSalaryReport">{{
            $t("generate_report")
          }}</el-button>
          <el-button type="warning" plain>{{
            $t("export_payslips")
          }}</el-button>
        </div>
      </template>

      <template v-if="salaryCalculationForm.calculationStatus == 6">
        <div class="title">{{ $t("approved_payroll_calculation") }}</div>
        <div class="desc">
          {{ $t("revoke_approval_salary_calculation")
          }}<span class="desc-color" @click="backList">{{
            $t("return_payroll_calculation")
          }}</span>
        </div>
        <div class="button-line">
          <el-button type="success" plain @click="changeStatus(5)">{{
            $t("withdraw_approval")
          }}</el-button>
          <el-button type="primary" @click="payrollDistribution">{{
            $t("release_payslips")
          }}</el-button>
          <el-button type="warning" plain @click="createSalaryReport">{{
            $t("generate_report")
          }}</el-button>
          <el-button type="warning" plain>{{
            $t("export_payslips")
          }}</el-button>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import {
  createSalaryReport,
  payrollDistribution,
} from "@/api/salary/salaryCalculation";
export default {
  components: {},
  props: {
    salaryCalculationForm: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  dicts: [],
  data() {
    return {};
  },
  created() {},
  methods: {
    backList() {
      this.$emit("backList");
    },
    changeStatus(value) {
      this.$emit("changeStatus", value);
    },
    createSalaryReport() {
      this.$modal
        .confirm(this.$t("generating_salary_report"))
        .then(() => {
          createSalaryReport(this.salaryCalculationForm.id).then((res) => {
            this.$modal.msgSuccess(this.$t("operation_successful"));
          });
        })
        .catch(() => {});
    },
    //发放工资单
    payrollDistribution() {
      this.$modal
        .confirm(this.$t("confirm_payroll_distribution"))
        .then(() => {
          payrollDistribution(this.salaryCalculationForm.id).then((res) => {
            this.$modal.msgSuccess(this.$t("operation_successful"));
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style scoped lang="scss">
.content {
  text-align: center;
  .title {
    font-size: 32px;
    font-weight: bold;
    color: #333;
    margin: 40px;
  }
  .desc {
    color: #333;
    font-size: 14px;
    margin: 20px 0 60px;
    .desc-color {
      color: #1890ff;
      cursor: pointer;
    }
  }
  .button-line {
    margin: 10px 0;
    text-align: center;
  }
}
</style>
